<template>
	<view class="wrap">
		<u-navbar :placeholder="true" bg-color="#f4f4f4">
			<view slot="left" class="signage">
				<u--image src="/static/face.jpg" width="28px" height="28px" shape="circle"></u--image>
				<text class="shop-name">百草堂</text>
			</view>
		</u-navbar>	
		
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="banner-box">
				<u-swiper :list="bannerList" indicator indicatorMode="line" circular @click="clickBanner"></u-swiper>
			</view>
				
			<u-sticky offset-top="64">
				<view class="filter-box">
					<view class="filter-item" v-for="filter in filterList" :key="filter.ident"
						@click="productFilter(filter.ident)"
					>
						<view v-if="filter.ident==currentFilterIdent" class="text active">{{ filter.name }}</view>
						<view v-else class="text">{{ filter.name }}</view>
					</view>
				</view>
			</u-sticky>	

			<view class="product-list">
				<view class="product" @click="gotoProduct(product.id)"
					v-for="product in productList" :key="product.id"
				>
					<u--image :src="product.cover" width="339rpx" height="339rpx"></u--image>
					<view class="info">
						<u--text size="14" :lines="2" :text="product.title"></u--text>
						<u--text v-if="product.feedback != ''" size="12" :lines="1" color="#7e670a" margin="6px 0"
							:text="product.feedback"></u--text>
						<view class="sale">
							<x-price :amount="product.price"></x-price>
							<view class="bought">{{ product.saleNum }}人买过</view>
						</view>
					</view>		
				</view>
			</view>	
		</mescroll-body>
		
		<x-tabbar currentTab="shop" :cartItemNum="cartProductNum"></x-tabbar>
	</view>
</template>

<script>
import XTabbar from "@/components/XTabbar.vue";
import XPrice from "@/components/XPrice.vue";
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import { productList } from "@/api/shop.js";
import { cartItemNum } from "@/api/cart.js";
	
export default {
	mixins: [MescrollMixin],
	components: {
		XTabbar,
		XPrice
	},
	onShow() {
		this.getCartItemNum();
	},
	data() {
		return {
			cartProductNum: 0,
			bannerList: [
				'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				'https://cdn.uviewui.com/uview/swiper/swiper2.png',
				'https://cdn.uviewui.com/uview/swiper/swiper3.png'
			],
			queryParams: {},
			currentFilterIdent: 'default',
			filterList: [
				{
					ident: 'default',
					name: '综合'
				},
				{
					ident: 'sale',
					name: '销量'
				},
				{
					ident: 'new',
					name: '新品'
				},
				{
					ident: 'price',
					name: '价格'
				}
			],
			productList: []
		}
	},
	methods: {
		getCartItemNum() {
			if(this.isLogin()) {
				cartItemNum().then(res=>{
					this.cartProductNum = res.data.num;
				});
			}
		},
		upCallback(page) {
			console.log("上拉加载");
			this.queryParams.pageSize = page.size;
			this.queryParams.page = page.num;
			this.queryParams.filter = this.currentFilterIdent;
			productList(this.queryParams).then(res=>{
				// 第一页手动置空列表
				if(page.num == 1) {
					this.productList = [];	
				}
				
				this.productList = this.productList.concat(res.data.productList); 
				this.mescroll.endBySize(res.data.productList.length, res.data.totalRow);
			});
		},
		clickBanner(index) {
			console.log("点击了第 " + index + " 张轮播图");
		},
		productFilter(ident) {
			console.log("----------ident:" + ident);
			this.filter = ident;
		},
		gotoProduct(id) {
			uni.navigateTo({
				url: `/pages/shop/product?id=${id}`
			});
		}
	}
}
</script>

<style lang="less" scoped>
.wrap {
	display: flex;
	flex-direction: column;
	background: #f4f4f4;
	height: 100vh;
}	

.signage {
	display: flex;
	flex-direction: row;
	align-items: center;
	
	.shop-name {
		font-size: 15px;
		margin: 0 12rpx;
	}
}

.banner-box {
	padding: 12rpx 24rpx 24rpx 24rpx;	
	background: #f4f4f4;
}

.filter-box {
	display: flex;
	flex-direction: row;
	padding: 0 24rpx;
	align-items: center;
	background: #f4f4f4;
	
	.filter-item {
		width: 25%;
		padding: 5px; 
		text-align: center;
		font-size: 14px;
		color: #8c8c8c;
		
		.active {
			color: #000;
		}
	}
	
}

.product-list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	padding: 12rpx;
	background: #f4f4f4;
	
	.product {
		flex-direction: column;
		width: 339rpx;
		background: #fff;
		margin: 12rpx;
		border-radius: 12rpx;
		overflow: hidden;
		
		.info {
			padding: 12rpx;
						
			.sale {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				
				.bought {
					font-size: 12px;
					color: #acacac;
				}
			}
		}
		
	}
}
</style>
